<template>
  <view class="outline">
    <u-collapse @change="change" accordion>
      <u-collapse-item v-for="item in outline" :key="item.title" :title="item.title" :name="item.title">
        <text class="u-collapse-content title">{{item.title_text}}</text>
        <ul @click="toLearn" class="class_item">
          <li v-for="(class_item,index) in item.child" :key="index" :data-id="class_item.id">
            {{class_item.child_title}}
          </li>
        </ul>
      </u-collapse-item>
    </u-collapse>
  </view>
</template>

<script>
  export default {
    name: "class_outline",
    props:['class_outline'],
    data() {
      return {
        outline: this.class_outline
      };
    },
    methods: {
      // 当改变时的回调
      change(e) {
        console.log('change', e)
      },
      // 点击课程的回调
      toLearn(e) {
        uni.navigateTo({
          url:`/subpackage/class_learn/class_learn?id=${e.target.dataset.id}`
        })
      }
    }
  }
</script>

<style lang="less">
  .outline {
    background-color: #fff;
    .title {
      font-size: 36rpx;
      font-weight: 500;
    }
    .class_item {
      padding: 20rpx;
      margin-top: 30rpx;
      li {
        padding: 0 20rpx;
        margin: 10rpx 0;
        height: 100rpx;
        line-height: 100rpx;
        font-size: 30rpx;
        border-radius: 10rpx;
        box-shadow: 2rpx 2rpx 2rpx 4rpx #e2e2e2;
      }
    }

  }
</style>
